<template>
  <div class="box">
    <ul class="ul1">
      <li class="li1">基本设置</li>
      <li>
        简介查词首页
        <p class="li1">vIp会员尊享</p>
      </li>
      <li>
        单词锁屏
        <p class="li1">学习就在每分每秒</p>
      </li>
    </ul>
    <ul class="ul2">
      <li>账号与绑定设置</li>
      <li>跨软件查词</li>
      <li>
        开启词典工具栏
        <!-- <van-cell-group>
  <van-switch-cell v-model="checked" title="标题" />
</van-cell-group> -->
        <!-- <span class="iconfont icon-anniu_kaiqi"></span>
         -->
        <!-- <van-switch v-model="checked" /> -->
        <van-switch
          v-model="checked"
          active-color="#f13945"
          inactive-color="#fff"
          size="14px"
        />
      </li>
      <li>
        是否开启词典工具栏
        <!-- <span class="iconfont icon-anniu_kaiqi"></span> -->
        <van-switch
          v-model="checked1"
          active-color="#f13945"
          inactive-color="#fff"
          size="14px"
        />
      </li>
      <li>清除缓存</li>
      <li>儿童访问限制</li>
      <li>深色模式使用指南</li>
      <li>是否开启词典工具栏</li>
    </ul>
    <div class="xian"></div>
    <ul class="ul1">
      <li class="li1">基本设置</li>
      <li>意见反馈</li>
      <li>给有道词典评分</li>
      <li>推荐给朋友</li>
      <li class="guanzhu">
        关注我们
        <span class="iconfont icon-xinlangweibo"></span>
      </li>
    </ul>
    <div class="xian"></div>
    <ul class="ul1">
      <li class="li1">产品信息</li>
      <li class="gexing">
        个性化推荐
        <!-- <span class="iconfont icon-anniu_kaiqi"></span> -->
        <van-switch
          v-model="checked2"
          active-color="#f13945"
          inactive-color="#fff"
          size="14px"
        />
      </li>
      <li>检查更新</li>
      <li>服务条款</li>
      <li>隐私政策</li>
      <li>第三方共享信息清单</li>
      <li>儿童信息保护</li>
      <li>
        关于
        <p class="li1">v9.1.1.16</p>
      </li>
      <li>网络诊断</li>
    </ul>
    <div class="xian"></div>
    <ul class="ul1">
      <li class="li1">账户</li>
      <li class="back">退出登录</li>
    </ul>
  </div>
</template>


<script>
import Vue from "vue";
import { Switch } from "vant";

Vue.use(Switch);
export default {
  name: "Setcon",
  props: {
    type: String,
  },
  data() {
    return {
      checked: true,
      checked1: true,
      checked2: true,
    };
  },
};
</script>

<style scoped>
@import url(../assets/iconfont.css);
.box {
  width: 100%;
  height: 1.6rem;
}
li {
  list-style: none;
}
.ul1 {
  margin-left: 15px;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.ul1 .li1 {
  color: #b7b9b6;
  font-size: 0.08rem;
}
.ul1 li {
  margin: 0.15rem 0;
  margin-top: 0.2rem;
}
.ul1 li {
  font-size: 0.14rem;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
}
.ul1 .guanzhu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ul1 .gexing {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-xinlangweibo {
  color: #f13945;
  font-size: 0.2rem;
}
.ul1 span {
  margin-right: 0.2rem;
}
.ul2 {
  margin-left: 15px;
}
.ul2 li {
  margin-top: 0.25rem;
  margin-bottom: 0.1rem;
  font-size: 0.14rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xian {
  background-color: #b7b9b6;
  height: 0.01rem;
  margin-top: 0.2rem;
}
.back {
  color: #f13945;
  padding-bottom: 0.2rem;
}
.icon-anniu_kaiqi {
  color: #f13945;
  font-size: 0.35rem;
}
.van-switch {
  margin-right: 0.25rem;
}
.ul2 span {
  margin-right: 0.2rem;
}
</style>